<!--
 * @Descripttion:
 * @version:
 * @Author: caiailing
 * @Date: 2023-04-03 14:32:48
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-04-06 14:32:58
-->
<!--
 * @Descripttion:
 * @version:
 * @Author: caiailing
 * @Date: 2023-04-03 11:26:03
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-04-04 16:06:53
-->
<script setup lang="ts">
import { ref } from 'vue'
import { forward } from '@/utils/router/router'
const userStore = useStore('user')
// 账号密码
const userInfo = reactive<PostLogin.data>({
  login: 'manager',
  password: 'Tmesoft123'
})
// 登录规则
const rules = reactive({
  login: {
    type: 'string',
    required: true,
    message: '请填写账号',
    trigger: ['blur', 'change']
  },
  password: [
    {
      type: 'string',
      required: true,
      message: '请填写密码',
      trigger: ['change']
    }
  ]
})
let pageName: string
let pageQuery: string
interface IonloadQuery {
  pageName?: string
  pageQuery?: string
}
onLoad((query: IonloadQuery | undefined) => {
  if (query) {
    pageName = query?.pageName!
    pageQuery = query?.pageQuery!
  }
})
// form表单元素
const refUform = ref<any>(null)
// 提交表单逻辑
const handleSubmit = async () => {
  await refUform.value
    .validate()
    .then(async (res) => {
      const loginForm: PostLogin.data = {
        login: userInfo.login!,
        password: userInfo.password!
      }
      try {
        await userStore.login(loginForm) // 登录接口
        await userStore.userInfo({}) // 获取用户信息接口
        if (pageName) {
          return forward(pageName, JSON.parse(pageQuery))
        }
        forward('index') // 跳到首页
      } catch (error) {}
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<template>
  <view class="login">
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u-form
      ref="refUform"
      label-position="left"
      :model="userInfo"
      :rules="rules"
    >
      <u-form-item label="账号" prop="login" border-bottom>
        <u-input
          v-model="userInfo.login"
          border="none"
          color="white"
          clearable
        ></u-input>
      </u-form-item>
      <u-form-item label="密码" prop="password" border-bottom>
        <u-input
          v-model="userInfo.password"
          password
          border="none"
          color="white"
          clearable
        ></u-input>
      </u-form-item>
    </u-form>
    <view class="submit-btn" @click="handleSubmit()">
      <u-button text="提交"></u-button>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
